<script setup lang="ts">
import { ref } from "vue";

defineOptions({
  name: "Collapse"
});

const radio = ref();
const collapseRef = ref();
const activeNames = ref(["1", "2", "3", "4", "5"]);
const isOpen = ref(true);


const handleChange = (val: string[]) => {
  console.log(val);
};
</script>

<template>
  <el-card shadow="never">
    <el-collapse ref="collapseRef" v-model="activeNames" class="w-[360px]"
      :accordion="radio === 'accordion' ? true : false" @change="handleChange">
      <el-collapse-item title="周一" name="1">
        周一启航，新的篇章
      </el-collapse-item>
      <el-collapse-item title="周二" name="2">
        周二律动，携手共进
      </el-collapse-item>
      <el-collapse-item title="周三" name="3">
        周三昂扬，激情不减
      </el-collapse-item>
      <el-collapse-item title="周四" name="4">
        周四精进，事半功倍
      </el-collapse-item>
      <el-collapse-item name="5">
        <template #title>
          周五
          <IconifyIconOnline icon="streamline-emojis:beaming-face-with-smiling-eyes" class="ml-1" width="30" />
        </template>
        周五喜悦，收尾归档
      </el-collapse-item>
    </el-collapse>
  </el-card>
</template>